@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Variables that start with --gnome- are added by me and are assigned
 * to elements somewhere in this code. The rest of the variables are
 * built-in in Firefox, so you need to add an !important if you wanna
 * override them. */

:root {
	/* Buttons */
	--gnome-button-suggested-action-background: linear-gradient(to top, rgb(36, 235, 195) 2px, #16A085);
	--gnome-button-suggested-action-border-color: #16A085;
	--gnome-button-suggested-action-border-accent-color: #004b3d;
	--gnome-button-suggested-action-hover-background: linear-gradient(to top, rgb(36, 235, 195), #16A085 1px);
	--gnome-button-suggested-action-active-background: rgb(16, 129, 107);
	--gnome-button-suggested-action-active-border-color: rgb(13, 109, 90);

	/* Entries */
	--gnome-focused-urlbar-border-color: #864780;

	/* Switch */
	--gnome-switch-active-background: #16A085;
	--gnome-switch-active-border-color: #1fdab5;
	--gnome-switch-active-slider-border-color: #1fdab5;

	/* Tabs */
	--gnome-tabbar-tab-active-border-bottom-color: #16A085;
	--gnome-tabbar-tab-active-border-bottom-color-contrast: rgb(42, 253, 211);
	--gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
}

/* Recolor some elements that are blue by default */

#star-button[starred] {
	fill: #16A085 !important;
  }

.tab-throbber[busy]::before {
  background-image: url("chrome://global/skin/icons/loading.png") !important;
  animation: unset !important;
  filter: invert(0.9) sepia(1) saturate(5) hue-rotate(110deg)
}
.tab-throbber[busy]:not([progress])::before {
  /* Grays the blue during "Connecting" state */
  filter: grayscale(100%);
}
@media (min-resolution: 2dppx) {
  .tab-throbber[busy]::before {
    background-image: url("chrome://global/skin/icons/loading@2x.png") !important;
  }
}

#tabbrowser-tabs {
    --tab-loading-fill: #16A085! important;
}